<template>
  <div class="card-warp">
    <div class="list-container bg-white" :class="[exception?'exception':'']">

      <div class="card-title">
        <div class="title-warp">

          <div class="prefix">
            <div class="icon">
              <image class="image-icon-md icon-offset--sm mr-1" src="@/static/icons/icon-calling.png"></image>
            </div>
            <div>
              <slot name="title"></slot>
            </div>
          </div>

          <div class="suffix text-grey-300">
<!--            <span class="progress-tip">-->
<!--              -->
<!--            </span>-->
          </div>
        </div>
      </div>

      <div class="content">
        <slot></slot>
        <div class="exception-tip" v-if="exception">
          <span class="">
            <image class="image-icon-md error-icon" src="@/static/icons/icon-exception.png"></image>
          </span>
          <slot name="error"></slot>
        </div>
      </div>

      <div class="card-footer">
        <div class="title-warp">

          <div class="prefix state-color">
            <div class="icon">
              <image class="image-icon-md icon-offset--sm mr-1" :src="(exceptionType.url)"></image>
            </div>
            <div :class="[exceptionType.className]">
              {{ exceptionType.name }}
            </div>
          </div>

          <div class="suffix text-grey-300">
            <span>是否超时：</span>
            <switch class="uni-switch"
                    disabled
                    :checked="form.timeout"
            ></switch>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref, computed, watch} from "vue";
import {onLoad, onPullDownRefresh} from '@dcloudio/uni-app'

const props = defineProps({
  state: {
    type: [Number, String],
    default: 0
  },
  type: {
    type: Number,
    default: 0
  },
  exception: {
    type: Boolean,
    default: false
  },
  timeout:{
    type:[Boolean],
    default:false
  }
})



const form = reactive({
  timeout: false
})

watch(()=>props.timeout,(v)=>{
  form.timeout = v;
},{
  immediate:true
})

const exceptionType = computed(() => {
  const baseUrl = (iconName) => '../static/icons/icon-cate-' + iconName + '.png'
  let obj = {
    name: '',
    url: '#',
    className: ''
  }
  let type = {
    '0': {
      name: '物料',
      url: baseUrl('metirial'),
      className: 'primary'
    },
    '1': {
      name: '工艺',
      url: baseUrl('carft'),
      className: 'success'
    },
    '2': {
      name: '质量',
      url: baseUrl('qty'),
      className: 'sc-purple'
    },
    '3': {
      name: '设备',
      url: baseUrl('device'),
      className: 'sc-aqua'
    },
    '9': {
      name: '其他',
      url: baseUrl('other'),
      className: 'info'
    }
  }

  let res = type[props.type];
  if (!res) {
    return obj;
  }
  return res;
})
</script>

<style lang="scss" scoped>
.card-warp {

  .list-container {
    margin: 15rpx 25rpx;
    overflow: hidden;
    border-radius: 15rpx;
    border: 1px white solid;

    &.exception {
      background: rgb(255, 239, 239);
      background: linear-gradient(180deg, rgba(255, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);
      border: 1px #ff9999 solid;
    }

    .card-title,
    .card-footer {
      border-bottom: 1px #e3e3e3 solid;

      .title-warp {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12rpx 22rpx;
        font-size: 28rpx;
        color: #7f7f7f;

        .suffix {
          display: flex;
          flex-direction: row;
          align-items: center;

          .progress-tip {
            border-radius: 8rpx;
            padding: 8rpx 12rpx;
            color: #ff8924;
            background-color: #fff5ec;
          }
        }

        .prefix {
          display: flex;
          flex-direction: row;
          align-items: center;


          .icon {
            position: relative;
            top: 3px;
            margin-right: 8rpx;
          }

        }

      }
    }

    .card-footer {
      border-top: 1px #e3e3e3 solid;
      border-bottom: none;
    }

    .content {
      min-height: 32rpx;
      padding: 18rpx 22rpx;
      font-size: 30rpx;
      color: #7f7f7f;

      .exception-tip {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #ff1c1f;
        font-weight: 600;

        .error-icon {
          position: relative;
          top: 3px;
          margin-right: 12rpx;
        }
      }
    }

  }

}
</style>
